// 格式化提交信息
function formatData(obj) {
  let data = ''
  for(let i in obj) {
    data += i + '=' + obj[i] + '&'
  }
  return data = data.slice(0, data.length - 1)
};

// 登陆函数
function login() {
  //通过ajax提交请求
  ajax(data = {
    type: 'post',
    url: '/api/user/login',
    data: formatData({
      username: loginTest.querySelectorAll('input')[0].value,
      password: loginTest.querySelectorAll('input')[1].value
    }),
    dataType: 'json',
    success: function(result) {
      var p = loginTest.querySelector('.password').querySelector('p')
      switch (result.code){
        case 0://登录成功
          p.innerHTML = result.message
          // alert(result.message)
          window.location.reload()
          break
        case 1://登录失败
        p.innerHTML = result.message
          break
        default:
          alert('result.code' + result.code + '请进行相应的处理');
      }
    }
  })
};

// 注册函数
function register() {
  //通过ajax提交请求
  ajax(data = {
    type: 'post',
    url: '/api/user/register',
    data:formatData({
      username: registerTest.querySelectorAll('input')[0].value,
      password: registerTest.querySelectorAll('input')[1].value,
      repassword: registerTest.querySelectorAll('input')[2].value
    }),
    dataType: 'json',
    success: function(result) {
      var p = registerTest.querySelector('.repassword').querySelector('p')
      switch (result.code){
        case 0://注册成功
          p.innerHTML = result.message;
          registerTest.style.display = 'none'
          loginTest.style.display = 'block'
          break
        case 1://注册失败
          p.innerHTML = result.message;
          break
        default:
          alert('result.code' + result.code + '请进行相应的处理');
      }
    }
  })
};

//点击登录弹出登录框
(function toShowMask() {
  var header = document.querySelector('#header')
  var mask = document.querySelector('#mask')
  var wrap = mask.querySelector('.wrap')
  var loginRegister = document.querySelector('#loginRegister')
  var loginTest = loginRegister.querySelector('.loginTest')
  var userInput = loginTest.querySelector('.user').querySelector('input')
  if(header.querySelector('.login')) {
    var loginBtn = header.querySelector('.login')
    loginBtn.addEventListener('click', function() {
      wrap.addEventListener('click', function(e) {
        e.stopPropagation()
      },false)
      mask.style.display = 'block'
      userInput.focus()
    },false)
  }

  // 登出
  if(header.querySelector('.logout')) {
    var logoutBtn = header.querySelector('.logout')
    logoutBtn.addEventListener('click', function() {
      var data = {
        type: 'get',
        url: '/api/user/logout',
        dataType: 'json',
        success: function(result) {
          if(result.code ==0) {
            window.location.reload();
          }
        }
      }
      ajax(data)
    })
  }
  loginRegister.addEventListener('click', function() {
    mask.style.display = 'none'
  })
})();

// 登陆相关函数
(function toLogin() {

  var loginRegister = document.querySelector('#loginRegister')

  if(loginRegister.querySelector('#registerTest')){
    //获取注册相关的信息
    var registerTest = loginRegister.querySelector('#registerTest')
    var registerBtn = registerTest.querySelectorAll('button')[0]
    var loginNowBtn = registerTest.querySelectorAll('button')[1]

    //获取登录相关的信息
    var loginTest = loginRegister.querySelector('#loginTest')
    var loginBtn = loginTest.querySelectorAll('button')[0]
    var registerNowBtn = loginTest.querySelectorAll('button')[1]

    //切换到登录页面
    loginNowBtn.addEventListener('click', function() {
      registerTest.style.display = 'none'
      loginTest.style.display = 'block'
    })

    //切换到注册页面
    registerNowBtn.addEventListener('click', function() {
      registerTest.style.display = 'block'
      loginTest.style.display = 'none'
    })

    // 进行登陆表单校验
    var loginUserInput = loginTest.querySelector('.user').querySelector('input')
    var loginPswInput = loginTest.querySelector('.password').querySelector('input')

    // 登陆输入框用户名函数
    loginUserInput.addEventListener('focus', function() {
      loginUserInput.addEventListener('keyup', function() {
        var p = loginTest.querySelector('.user').querySelector('p')
        // 含有非法字符
        var re1 = /^[^a-z\u4e00-\u9fa5]/
        var re2 = /[^\w\u4e00-\u9fa5]+$/g
        if(re1.test(loginUserInput.value)) {
          p.innerHTML = '用户名必须是字母、汉字或下划线组成，且首字母不能为数字'
          return
        }
        if(re2.test(loginUserInput.value)){
          p.innerHTML = '用户名必须是字母、汉字或下划线组成，且首字母不能为数字'
          return
        }
        if(loginUserInput.value === '') {
          p.innerHTML = '用户名不能为空'
          return
        }
        p.innerHTML = ''
        return
      })
    })

    // 登陆输入框密码函数
    loginPswInput.addEventListener('focus', function() {
      var p = loginTest.querySelector('.password').querySelector('p')
      loginPswInput.addEventListener('keyup', function(e) {
        var event = e || window.e
        if (event.keyCode === 13) {
          if (loginPswInput.value === '') {
            p.innerHTML = '密码不能为空'
            return
          }
          login()
        }
        if (event.keyCode === 8) {
          p.innerHTML = ''
        }
      })
      loginBtn.addEventListener('click', login, false)
    })

    // 进行注册表单校验
    var registerUserInput = registerTest.querySelector('.user').querySelector('input')
    var registerPswInput = registerTest.querySelector('.password').querySelector('input')
    var registerRepswInput = registerTest.querySelector('.repassword').querySelector('input')

    // 注册输入框用户名函数
    registerUserInput.addEventListener('focus', function() {
      registerUserInput.addEventListener('keyup', function() {
        var p = registerTest.querySelector('.user').querySelector('p')
        // 含有非法字符
        // var re = /[^\w\u4e00-\u9fa5]*/g
        var re1 = /^[^a-z\u4e00-\u9fa5]/
        var re2 = /[^\w\u4e00-\u9fa5]+$/g
        if(re1.test(registerUserInput.value)) {
          p.innerHTML = '用户名必须是字母、汉字或下划线组成，且首字母不能为数字'
          return
        }
        if(re2.test(registerUserInput.value)){
          p.innerHTML = '用户名必须是字母、汉字或下划线组成，且首字母不能为数字'
          return
        }
        if(registerUserInput.value === '') {
          p.innerHTML = '用户名不能为空'
          return
        }
        p.innerHTML = ''
        return
      })
    })

    // 检验确认密码
    registerRepswInput.addEventListener('focus', function() {
      registerRepswInput.addEventListener('keyup', function(e) {
        var event = e || window.e
        var p = registerTest.querySelector('.repassword').querySelector('p')
        if (event.keyCode === 13) {
          if (registerPswInput.value === '') {
            p.innerHTML = '密码不能为空'
            return
          }
          if (registerPswInput.value !== registerRepswInput.value) {
            p.innerHTML = '两次密码输入不一致'
            return
          }
          register()
        }
        if (event.keyCode === 8) {
          var p = loginTest.querySelector('.repassword').querySelector('p')
          p.innerHTML = ''
        }
      })
      registerBtn.addEventListener('click', login, false)
    })
  }
})();

// 移动端响应式导航栏
(function(){
  // 获取需要操作对象的元素节点
  var navLeftBtn = document.querySelector('#navLeftBtn')
  var navLeft = document.querySelector('#navLeft')
  navLeftBtn.addEventListener('click', function(e) {
    navLeft.style.left = '0'
    document.addEventListener('touchend', function() {
      navLeft.style.left = '-120px'
    })
    e.stopPropagation()
  })
})();

// 导航栏固定顶部
(function() {
  var nav = document.querySelector('#nav')
  var main = document.querySelector('#main')
  window.onscroll = function() {
    var topScorll = document.documentElement.scrollTop
    if(topScorll > 100) {
      nav.style.position = 'fixed'
      nav.style.top = '0'
      nav.style.opacity = (topScorll - 100) / 200
      main.style.marginTop = 50 + 'px'
    } else {
      nav.style.position = 'static'
      nav.style.opacity = 1
      main.style.marginTop = 0
    }
  }
})();
